<template>
	<view class="ratio">
		<navBar isBack backColor="#fff" title="佣金比率调整" color="#fff" background="transparent"></navBar>
		<view class="r_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			
			<!-- 当前比率 -->
			<view class="r_nowRatio">
				20%
				<view class="r_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/nowRatio.png" mode=""></image>
					当前比率
				</view>
			</view>
		</view>
		
		
		<!-- 调整比率按钮 -->
		<view class="r_changAllBtn" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="r_changBtnLeft" :class="changeRatio?'r_btnActive':''" @click="toChangeRatio">
				<image v-if="changeRatio" src="https://manager.ryz1620.com/static/distri/fenxiao/commission.png" mode=""></image>
				<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/commission2.png" mode=""></image>
				调整比率
			</view>
			<view class="r_changBtnRight" :class="changeRatio?'':'r_btnActive'" @click="toChangeRecord">
				<image v-if="changeRatio" src="https://manager.ryz1620.com/static/distri/fenxiao/record.png" mode=""></image>
				<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/record2.png" mode=""></image>
				调整记录
			</view>
		</view>
		
		<!-- 调整比率滑块 -->
		<view class="r_changeRatioNav" v-if="changeRatio">
			<!-- 黄金 -->
			<view class="r_SliderOne">
				<view class="r_SliderOne_top">
					<view class="r_SliderOne_topLeft ">
						<image src="https://manager.ryz1620.com/static/distri/fenxiao/gold.png" mode=""></image>
						金牌精英
					</view>
					<span>{{percen3[0]}}%</span>
				</view>
				<sliderLine width="622" min="70" max="99" :values='percen3' liveMode sliderImg='https://manager.ryz1620.com/static/distri/fenxiao/goldRange.png' background-color='#D8D8D8' @rangechange="rangechange3" active-color='#EFB82F' bar-height="26"></sliderLine>
				<!-- <view class="r_SliderOne_bottom">
					<image src="../../../static/distri/commRate/银牌（滑动）.png" mode="" :style="{left:left2+'%'}"></image>
					<view class="r_SliderOneChild r_SliderTwo" :style="{width:left2+'%'}"></view>
				</view> -->
			</view>
			<!-- 白银 -->
			<view class="r_SliderOne">
				<view class="r_SliderOne_top">
					<view class="r_SliderOne_topLeft r_SliderText">
						<image src="https://manager.ryz1620.com/static/distri/fenxiao/silver.png" mode=""></image>
						银牌精英
					</view>
					<span>{{percen2[0]}}%</span>
				</view>
				<sliderLine width="622" min="60" max="99" :values='percen2' liveMode sliderImg='https://manager.ryz1620.com/static/distri/fenxiao/silverRange.png' background-color='#D8D8D8' @rangechange="rangechange2" active-color='#ADBFD4' bar-height="26"></sliderLine>
			</view>
			
			<!-- 铜牌 -->
			<view class="r_SliderOne">
				<view class="r_SliderOne_top">
					<view class="r_SliderOne_topLeft r_SliderText2">
						<image src="https://manager.ryz1620.com/static/distri/fenxiao/copper.png" mode=""></image>
						铜牌精英
					</view>
					<span>{{percen1[0]}}%</span>
				</view>
				<sliderLine width="622" min="50" max="99" :values='percen1' sliderImg='https://manager.ryz1620.com/static/distri/fenxiao/copperRange.png' background-color='#D8D8D8' @rangechange="rangechange1" active-color='#E08848' bar-height="26"></sliderLine>
			</view>
			
			<view class="btn">
				<button type="primary" size="mini" @click="saveSet">保存</button>
			</view>
		</view>
		
		
		<!-- 调整比率记录 -->
		<view class="r_record" v-else>
			<!-- 渲染处 -->
			<view class="r_recordItem" v-for="(item,index) in historyList">
				<view class="r_time">{{item.create_time}}</view>
				<view class="r_recordItemList">
					
					<view class="r_recordItemList_1">
						<span>{{item.level3}}%</span>
						<view>
							<image src="https://manager.ryz1620.com/static/distri/fenxiao/gold.png" mode=""></image>
							金牌精英
						</view>
					</view>
					<view class="r_recordBorder"></view>
					<view class="r_recordItemList_1">
						<span>{{item.level2}}%</span>
						<view class="silver">
							<image src="https://manager.ryz1620.com/static/distri/fenxiao/silver.png" mode=""></image>
							银牌精英
						</view>
					</view>
					<view class="r_recordBorder"></view>
					<view class="r_recordItemList_1">
						<span>{{item.level1}}%</span>
						<view class="bronze">
							<image src="https://manager.ryz1620.com/static/distri/fenxiao/copper.png" mode=""></image>
							铜牌精英
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import sliderLine from './range-slider/range-slider.vue'
	import service_distri from '@/service/distri.js'
	export default{
		data(){
			return{
				changeRatio:true, //切换比率或记录
				percen3:[0,100],//金百分比
				percen2:[0,100],//银百分比
				percen1:[0,100],//铜百分比
				page:1,
				pagesize:10,
				historyList:[],
				navHeight:200,
			}
		},
		components:{
			navBar,
			sliderLine,
		},
		onLoad(options) {
			this.navHeight = 470 - Number(this.$store.state.system.navBarHeight)*2
			this.getRecord()
		},
		onReachBottom() {
			if(!this.changeRatio){
				this.page++
				uni.showLoading({
					title:'加载中...'
				})
				service_distri.seeHistoryList({page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res)
					if(res.code==1){
						if(!res.data.list.length){
							uni.showToast({
								title: '没有更多了',
								icon:'none'
							});
							return false
						}
						res.data.list.map(item=>{
							item.create_time = this.$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd hh:mm')
							// item.update_time = utils.getFormatDate(item.update_time*1000,'yyyy-MM-dd hh:mm')
						})
						this.historyList = this.historyList.concat(res.data.list)
					}
				})
				setTimeout(function(){
					uni.hideLoading()
				},500)
			}
		},
		methods:{
			// 获取当前比率
			getRecord(){
				service_distri.toSeeRecord().then(res=>{
					console.log(res)
					if(res.code==1){
						this.percen3[0] = res.data.level3
						this.percen2[0] = res.data.level2
						this.percen1[0] = res.data.level1
						this.$forceUpdate()
					}
					console.log(this.percen2)
				})
			},
			
			//点击到比率调整
			toChangeRatio(){
				this.changeRatio = true
			},
			
			//点击到调整记录
			toChangeRecord(){
				this.page = 1
				this.changeRatio = false
				uni.showLoading({
					title:'加载中...'
				})
				service_distri.seeHistoryList({page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res)
					if(res.code==1){
						res.data.list.map(item=>{
							item.create_time = this.$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd hh:mm')
						})
						this.historyList = res.data.list?res.data.list:[]
					}
				})
				setTimeout(function(){
					uni.hideLoading()
				},1000)
			},
			
			//金牌百分比
			rangechange3(e){
				console.log(e)
				this.percen3[0] = e.minValue;
				this.$forceUpdate()
			},
			
			//银牌百分比
			rangechange2(e){
				this.percen2[0] = e.minValue;
				this.$forceUpdate()
			},
			
			//铜牌百分比
			rangechange1(e){
				this.percen1[0] = e.minValue;
				this.$forceUpdate()
			},
			
			// 保存修改的比率
			saveSet(){
				service_distri.toSetRecord({lv1:this.percen1[0],lv2:this.percen2[0],lv3:this.percen3[0]}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.getRecord()
						uni.showToast({
							title: '修改成功'
						});
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.ratio{
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.r_topImg{
			width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}
		}
		
		// 当前比率
		.r_nowRatio{
			position: absolute;
			z-index: 2;
			width: 100%;
			left: 0;
			bottom: 60rpx;
			padding-left: 28rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.r_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		// t调整比率按钮
		.r_changAllBtn{
			position: relative;
			width: 702rpx;
			height: 72rpx;
			margin: 0 auto;
			background-color: #fff;
			display: flex;
			align-items: center;
			font: 500 30rpx/40rpx PingFang SC;
			image{width: 28rpx;height: 28rpx;margin:0 16rpx 0 96rpx;}
			.r_changBtnLeft{
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;
				border: 2rpx solid #DBA954;
				color: #DBA954;
			}
			.r_changBtnRight{
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				border-radius: 0 16rpx 16rpx 0;
				border: 2rpx solid #DBA954;
				color: #DBA954;
			}
			.r_btnActive{
				background-color: #DBA954;
				border: 0;
				color: #fff;
			}
		}
		
		// 调整比率滑块
		.r_changeRatioNav{
			width: 702rpx;
			height: 628rpx;
			background-color: #fff;
			margin: 40rpx auto 0;
			border-radius: 16rpx;
			padding: 60rpx 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.r_SliderOne{
				display: flex;
				flex-direction: column;
				.r_SliderOne_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					// margin-bottom: 32rpx;
					color: #EFB82F;
					.r_SliderOne_topLeft{
						display: flex;
						font: 500 26rpx/40rpx PingFang SC;
						image{width: 40rpx;height: 40rpx;margin-right: 16rpx;}
					}
					span{
						color: #000;
						font: 600 26rpx/40rpx PingFang SC;
					}
					// 银牌文字
					.r_SliderText{
						color: #AABCD1;
					}
					
					//铜牌文字
					.r_SliderText2{
						color: #BB501A;
					}
						
				}
				.r_SliderOne_bottom{
					width: 100%;
					height: 26rpx;
					background: #D8D8D8;
					position: relative;
					border-radius: 4rpx;
					image{
						width: 32rpx;
						height: 52rpx;
						position: absolute;
						top: -12rpx;
						left: 0%;
					}
					.r_SliderOneChild{
						position: absolute;
						top: 0;
						left: 0;
						width: 0%;
						height: 100%;
						background-color: #E7AD14;
					}
					
					//银牌滑块
					.r_SliderTwo{
						background: #ADBFD4;
					}
					
					//铜牌滑块
					.r_SliderTwo2{
						background: #E08848;
					}
				}
			}
			.btn{margin-top: 50rpx;text-align: center;}
		}
		
		// 调整比率记录
		.r_record{
			width: 702rpx;
			margin: 40rpx auto 0;
			.r_recordItem{
				width: 100%;
				height: 226rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 28rpx 24rpx;
				margin-bottom: 24rpx;
				.r_time{font: 400 26rpx/40rpx PingFang SC;color: #505050;}
				.r_recordItemList{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;
					.r_recordItemList_1{
						display: flex;
						flex-direction: column;
						align-items: center;
						font: 600 40rpx/60rpx PingFang SC;
						image{width: 28rpx;height: 28rpx;}
						view{
							display: flex;
							align-items: center;
							font: 400 24rpx/34rpx PingFang SC;
							color: #EFB82F;
						}
						.silver{
							color: #AABCD1;
						}
						.bronze{
							color: #BB501A;
						}
					}
					.r_recordBorder{
						width: 0;
						height: 32rpx;
						border: 2rpx solid #D8D8D8;
					}
				}
			}
		}
	}
</style>
